<template>
  <div class="detail">
    <img :src="bannerImg" alt @click="handleClick">
    <div class="photo">
      <div class="info">
        <span class="iconfont photo-2">&#xe65f;</span>
        <em>34</em>
      </div>
      <p class="title">知音号游船</p>
    </div>
    <div>
      <detail-nabar v-if="isNav" :style="opacitys"></detail-nabar>
      <router-link v-else tag="i" to="/" class="iconfont bg">&#xe682;</router-link>
    </div>
    <v-fade>
      <detail-gallary slot="fade" v-show="isGallary" @toggle="hide" :gallaryImgs="gallaryImgs"></detail-gallary>
    </v-fade>
    <detail-list :categoryList="categoryList" :children="children"></detail-list>
  </div>
</template>
<script>
import { DetailModels } from "../../models/DetailModel";
const detail = new DetailModels();
import DetailGallary from "../detail/components/gallary";
import DetailNabar from "../detail/components/nabar";
import VFade from "../detail/components/Fade"
import DetailList from "../detail/components/List";
export default {
  name: "detail",
  components: {
    DetailGallary,
    DetailNabar,
    VFade,
    DetailList,
  },
  data() {
    return {
      bannerImg: "",
      gallaryImgs: [],
      categoryList: [],
      children:[],
      isGallary: false,
      isNav:false,
      opacitys:{
          opacity:0
      },
    };
  },
  methods: {
    handleScroll(){
        var top = document.documentElement.scrollTop || document.body.scrollTop;
        if(top>0){
            this.isNav = true;
            var opacity = top/200;
            if(opacity>1){
                opacity = 1 ;
            }
            this.opacitys.opacity = opacity;
        }else {
            this.isNav = false 
        }
    },
    handleClick() {
      this.isGallary = true;
    },
    hide() {
      this.isGallary = false;
    }
  },
  mounted() {
    window.addEventListener("scroll",this.handleScroll)
    var id = this.$route.params.id;
    detail.getDetail(id).then(res => {
      console.log(res);
      let data = res.data.data;
      let bannerImg = data.bannerImg;
      this.bannerImg = bannerImg;
      let { gallaryImgs, categoryList } = data;
      this.gallaryImgs = gallaryImgs;

      this.categoryList = categoryList;
      let children = categoryList[0].children;
      this.children = children;
    });
  },
  destroyed() {
      window.removeEventListener("scroll",this.handleScroll)
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 2000px;
  img {
    width: 100%;
  }
}
.photo{
  position: absolute;
  color: white;
  top:260px;
  left:60px;
}
.info{
  width: 120px;
  height: 40px; 
  border-radius: 23px;
  background: hsla(0,0%,100%,.205);
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-2{
  font-size: 27px !important ;
  margin-right: 15px;
}
.title{
  font-size: 37px;
  margin-top: 20px;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  z-index: 3;
  font-size: 35px !important ;
  padding: 12px;
}
</style>
